/*
 * @Author: caijw 
 * @Date: 2018-11-11 13:14:20 
 * @Last Modified by: caijw
 * @Last Modified time: 2019-01-10 22:59:21
 * 
 * 修改账号
 */

import React, { Component } from 'react';
import Header from '../../../../components/Header/Header';
import '../../../../static/css/common.less';
import '../../../../static/css/weui.less';
import * as actions from '../../../../store/action/my';
import { connect } from "react-redux";
import { Toast, Toptips } from 'react-weui';
import { CityPicker,Button } from 'react-weui';
import cnCity from './cnCity';
import './address.less';

class Address extends Component {
    state = {
        city_show: false,
        city_value: '',
        province_code : '',
        city_code : '',
        district_code : '',
        showToast : {
            show : false,
        }
    };  
    receiver = React.createRef();
    address = React.createRef();
    phone =  React.createRef();

    //提交代码
    submit = (e) =>{
        e.preventDefault();
        let address = this.address.current.value;
        let phone = this.phone.current.value;
        let receiver = this.receiver.current.value;
        let province_code = this.state.province_code;
        let city_code = this.state.city_code;
        let district_code = this.state.district_code;
        if(receiver == ''){
            alert('收货人不能为空');
            return;
        }
       
        let data = {
            address:address,
            phone:phone,
            receiver : receiver,
            district_code : district_code,
            city_code : city_code,
            province_code : province_code,
            priority : 1
        }
        this.props.AddAddress(data); 

    }

    //提示信息
    componentWillReceiveProps(){
        setTimeout(()=>{
            if(this.props.my.addressRet == 0){
                this.setState({sign : {display : 'block' }});
            }else{
                if(this.props.my.addressRet == -1){
                    this.setState({showToast: {show: true}});
                    this.state.toastTimer = setTimeout(()=> {
                        this.setState({showToast: {show: false}});
                    }, 2000);
                }
            }
        },100)
    }
    

    //改变城市返回编号
    changeCity = (text) =>{
        this.setState({city_value: text, city_show: false});
        let province = text.split(' ')[0];
        let city = text.split(' ')[1]
        let district = text.split(' ')[2];

        let cityArr = [];
        cnCity.forEach((item)=>{
            if(item.name == province){
                cityArr = item.sub;
                this.setState({province_code: item.code});
            }
        })
        let districtArr = [];
        cityArr.forEach((item)=>{
            if(item.name == city){
                districtArr = item.sub;
                this.setState({city_code: item.code});
            }
        })
        districtArr.forEach((item)=>{
            if(item.name == district){
                this.setState({district_code: item.code});
            }
        })
    }


 

    render() {
        return (
            <div>
                <Toast icon="loading" show={this.props.my.fetching}>Loading...</Toast>
                {/* <Toptips type="info" show={this.state.showToast.show}>{this.props.my.addressMsg}</Toptips> */}
                <div className="detail-region picker">
                    <Header title="添加地址"></Header>
                    <CityPicker
                        data={cnCity}
                        onCancel={e=>this.setState({city_show: false})}
                        onChange={this.changeCity}
                        show={this.state.city_show}
                        // selected={[1,1,2]}
                    />

                    <section class="content">
                       <div className="sumbit-item">
                            <input type="text" placeholder="请输入收货人名称" ref={this.receiver} id="receiver" required></input>
                       </div>
                       <div className="sumbit-item">
                            <input type="text" placeholder="请输入手机号码"  ref={this.phone} id="phone" required></input>
                       </div>
                       <div className="sumbit-item">
                                <input type="text"
                                value={this.state.city_value}
                                onClick={ e=> {
                                    e.preventDefault();
                                    this.setState({city_show: true})
                                }}
                                placeholder="请选择地址"
                                readOnly={true}
                            />
                       </div>
                       <div className="sumbit-item">
                            <textarea type="text" placeholder="请输入详细地址" ref={this.address} id="address" required></textarea>
                       </div>
                       <button className="submit-btn"  onClick={this.submit}>保存</button>
                    </section>
                </div>
            </div>
        )
    }
}

//把组件和store关联在一起
export default connect((state)=>{return {...state}}, actions)(Address);